<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="description" content="清镇安监卫士">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>${resultVo.result.reportName}</title>

    <style type="text/css">
        body, div, p, h1, h2, h3, h4, h5, h6, li, span, label, a {
            font-family: "Arial",
            "Microsoft YaHei", "微软雅黑",
            "SimHei", "黑体",
            "STHeiti", "华文黑体",
            "NSimSun", "新宋体",
            "SimSun", "宋体",
            "sans-serif";
        }
    </style>

    <link rel="stylesheet" href="<%=basePath%>js/lib/ace/assets/css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>js/lib/ace/assets/css/ace.css">
    <link rel="stylesheet" href="<%=basePath%>css/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="<%=basePath%>css/common/common.css">
</head>

<body>
<div class="main-container">
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <table class="width-p-100">
                            <tr>
                                <td>
                                    <h1 class="m-0 p-0 c-red f-s-16 text-break align-center line-height-p-180">
                                        ${resultVo.result.reportName}
                                    </h1>
                                </td>
                            </tr>

                            <tr class="border-bottom-red">
                                <td class="c-gray p-t-10 p-l-10 p-r-10 f-s-14 text-break align-left width-p-40">
                                    <div class="m-b-5">举报人：${resultVo.result.reportCreatePerson}</div>
                                </td>
                            </tr>

                            <tr>
                                <td class="p-t-5 p-l-10 p-r-10">
                                    <p class="m-0 p-0 f-s-14 text-break align-justify text-indent-30 line-height-p-180">
                                        ${resultVo.result.reportContent}
                                    </p>
                                </td>
                            </tr>

                            <tr>
                                <td class="c-red p-t-50 p-l-10 p-r-10 f-s-14 text-break">
                                    <div class="timeline-container">
                                        <div class="timeline-label">
                                            <span class="label label-primary arrowed-in-right label-lg">
                                                <b class="f-s-14">举报流程记录</b>
                                            </span>
                                        </div>

                                        <div class="timeline-items">
                                            <c:forEach var="reportResRecord" items="${resultVo.result.reportResRecords}">
                                                <c:choose>
                                                    <c:when test="${reportResRecord.reportResult eq '1'}">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-gray no-hover"></i>
                                                            </div>

                                                            <div class="widget-box transparent">
                                                                <div class="widget-header widget-header-small">
                                                                    <h5 class="widget-title smaller c-gray f-s-14">已举报</h5>

                                                                    <span class="widget-toolbar c-gray f-s-14">
                                                                        <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                                        ${reportResRecord.reportHandleTime}
                                                                    </span>
                                                                </div>

                                                                <div class="widget-body">
                                                                    <div class="widget-main c-gray f-s-14">
                                                                        处理人：${reportResRecord.reportHandlePerson}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${reportResRecord.reportResult eq '2'}">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-orange no-hover"></i>
                                                            </div>

                                                            <div class="widget-box transparent">
                                                                <div class="widget-header widget-header-small">
                                                                    <h5 class="widget-title smaller c-orange f-s-14">核实中</h5>

                                                                    <span class="widget-toolbar c-orange f-s-14">
                                                                        <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                                        ${reportResRecord.reportHandleTime}
                                                                    </span>
                                                                </div>

                                                                <div class="widget-body">
                                                                    <div class="widget-main c-orange f-s-14">
                                                                        处理人：${reportResRecord.reportHandlePerson}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${reportResRecord.reportResult eq '3'}">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-blue no-hover"></i>
                                                            </div>

                                                            <div class="widget-box transparent">
                                                                <div class="widget-header widget-header-small">
                                                                    <h5 class="widget-title smaller c-blue f-s-14">已核实</h5>

                                                                    <span class="widget-toolbar c-blue f-s-14">
                                                                        <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                                        ${reportResRecord.reportHandleTime}
                                                                    </span>
                                                                </div>

                                                                <div class="widget-body">
                                                                    <div class="widget-main c-blue f-s-14">
                                                                        处理人：${reportResRecord.reportHandlePerson}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${reportResRecord.reportResult eq '4'}">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <i class="timeline-indicator ace-icon iconfont icon-fork btn b-c-red no-hover"></i>
                                                            </div>

                                                            <div class="widget-box transparent">
                                                                <div class="widget-header widget-header-small">
                                                                    <h5 class="widget-title smaller c-red f-s-14">已关闭</h5>

                                                                    <span class="widget-toolbar c-red f-s-14">
                                                                        <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                                        ${reportResRecord.reportHandleTime}
                                                                    </span>
                                                                </div>

                                                                <div class="widget-body">
                                                                    <div class="widget-main c-red f-s-14">
                                                                        处理人：${reportResRecord.reportHandlePerson}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${reportResRecord.reportResult eq '5'}">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <i class="timeline-indicator ace-icon iconfont icon-hook btn b-c-green no-hover"></i>
                                                            </div>

                                                            <div class="widget-box transparent">
                                                                <div class="widget-header widget-header-small">
                                                                    <h5 class="widget-title smaller c-green f-s-14">已发放</h5>

                                                                    <span class="widget-toolbar c-green f-s-14">
                                                                        <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                                        ${reportResRecord.reportHandleTime}
                                                                    </span>
                                                                </div>

                                                                <div class="widget-body">
                                                                    <div class="widget-main c-green f-s-14">
                                                                        处理人：${reportResRecord.reportHandlePerson}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:when>
                                                </c:choose>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <c:if test="${not empty resultVo.result.reportImages}">
                                <c:set var="reportImages" value="${fn:split(resultVo.result.reportImages, '|')}"/>

                                <tr>
                                    <td class="c-red p-t-50 p-l-10 p-r-10 text-no-break f-s-14">
                                        举报图片：
                                    </td>
                                </tr>

                                <c:forEach var="reportImage" varStatus="status" items="${reportImages}">
                                    <tr>
                                        <td class="p-t-5 p-l-10 p-r-10 text-break align-center">
                                            <c:choose>
                                                <c:when test="${fn:startsWith(reportImage, 'http://') or fn:startsWith(reportImage, 'https://')}">
                                                    <img class="img-max-width-p-100" src="${reportImage}">
                                                </c:when>
                                                <c:otherwise>
                                                    <img class="img-max-width-p-100" src="<%=basePath%>${reportImage}">
                                                </c:otherwise>
                                            </c:choose>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="<%=basePath%>js/lib/ace/components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="<%=basePath%>js/lib/ace/components/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>